<template>
	<div class="main">
		<LeftMain></LeftMain>
		<slot name="center"></slot>
		<RightMain></RightMain>
	</div>
</template>

<script>
	import LeftMain from "./leftMain/LeftMain";
	import RightMain from "./rightMain/RightMain";
	export default {
		name: "BlogMain",
		components: {RightMain, LeftMain}
	}
</script>

<style scoped>
	@media screen and (max-width: 992px) {
		.main {
			flex-direction: column;
			align-items: center;
			padding-top: .1rem;
		}
	}
	@media screen and (min-width: 993px) {
		.main {
			justify-content: center;
			padding-top: .5rem;
		}
	}
	.main {
		display: flex;
	}
</style>
